<template>
	<div class="bg-act-box">
		<el-dialog
		  title="编辑样式(字体颜色)"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
			<div class="b-j-box">
				<span class="m-s-txt-lb">滚动中文字:</span>
				<el-radio-group v-model="radio" @change="radioChange(radio,'color')">
					<el-radio  label="1">默认</el-radio>
					<el-radio  label="2">自定义</el-radio>
				</el-radio-group>
				<div class="block" v-if="radio == '2'">
					<el-color-picker v-model="color" size="small" @change="change()"></el-color-picker>
				</div>
			</div>
			<div class="b-j-box">
				<span class="m-s-txt-lb">活动未开始:</span>
				<el-radio-group v-model="radio0" @change="radioChange(radio0,'color0')">
					<el-radio  label="1">默认</el-radio>
					<el-radio  label="2">自定义</el-radio>
				</el-radio-group>
				<div class="block" v-if="radio0 == '2'">
					<el-color-picker v-model="color0" size="small" @change="change()"></el-color-picker>
				</div>
			</div>

			<div class="b-j-box">
				<span class="m-s-txt-lb">活动进行中:</span>
				<el-radio-group v-model="radio1" @change="radioChange(radio1,'color1')">
					<el-radio  label="1">默认</el-radio>
					<el-radio  label="2">自定义</el-radio>
				</el-radio-group>
				<div class="block" v-if="radio1 == '2'">
					<el-color-picker v-model="color1" size="small" @change="change()"></el-color-picker>
				</div>
			</div>

			<div class="b-j-box">
				<span class="m-s-txt-lb">活动已结束:</span>
				<el-radio-group v-model="radio2" @change="radioChange(radio2,'color2')">
					<el-radio  label="1">默认</el-radio>
					<el-radio  label="2">自定义</el-radio>
				</el-radio-group>
				<div class="block" v-if="radio2 == '2'">
					<el-color-picker v-model="color2" size="small" @change="change()"></el-color-picker>
				</div>
			</div>
		  
		</el-dialog>
	</div>
</template>

<script>
	import addPhoto from "@/components/comm/AddPhoto.vue";
	import uploadPic from "@/js/upload/UploadPic.js";
	import staticConst from "@/js/const/StaticConst.js";
	export default
	{
		data()
		{
			return{
				dialogVisible:false,
				radio : '1',
				radio0 : '1',
				radio1 : "1",
				radio2 : "1",
				color : "",//滚动字体颜色
				color0: "", //活动未开始字体颜色
				color1: "", //活动进行中字体颜色
				color2: "", //活动已结束字体颜色
				defautColor:
				{
					color : "#999999", //滚动字体颜色
					color0: "#FF6600", //活动未开始字体颜色
					color1: "#F04848", //活动进行中字体颜色
					color2: "#AAAAAA", //活动已结束字体颜色
				},
			}
		},
		
		methods:
		{
			
			showWin(data)
			{
				this.dialogVisible = true;
				this.color = data.color;
				this.color0 = data.color0;
				this.color1 = data.color1;
				this.color2 = data.color2;
				if(this.color != this.defautColor.color)
					this.radio = "2";
				else
					this.radio = "1";
				
				if(this.color0 != this.defautColor.color0)
					this.radio0 = "2";
				else
					this.radio0 = "1";
				if(this.color1 != this.defautColor.color1)
					this.radio1 = "2";
				else 
					this.radio1 = "1";
				if(this.color2 != this.defautColor.color2)
					this.radio2 = "2";
				else
					this.radio2 = "1";
			},
			
			handleClose()
			{
				this.dialogVisible = false;
				let data = {
					color : this.color, //滚动字体颜色
					color0 : this.color0, //活动未开始字体颜色
					color1 : this.color1, //活动进行中字体颜色
					color2 : this.color2, //活动已结束字体颜色
				};
				this.$emit("editTxtStyle",data);
			},
			radioChange (val,key) {
				if (val == 1) { // 设置默认数据
					this[key] = this.defautColor[key];
					console.log(this[key],key)
				}
			},
			change()
			{
				if(this.radio == "1")
				{
					this.color = this.defautColor.color;
				}
				if(this.radio1 == "1")
				{
					this.color1 = this.defautColor.color1;
				}
				if(this.radio2 == "1")
				{
					this.color2 = this.defautColor.color2;
				}
				if(this.radio0 == "1")
				{
					this.color0 = this.defautColor.color0;
				}
				if(this.radio1 == "1")
				{
					this.color1 = this.defautColor.color1;
				}
				if(this.radio2 == "1")
				{
					this.color2 = this.defautColor.color2;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.bg-act-box
	{
		::v-deep.el-dialog
		{
			margin-top: 40vh !important;
		}
		
		.b-j-box
		{
			height: 36px;
			display: flex;
			align-items: center;
		}
	}
	.block {
		margin-left: 20px;
	}	
	.m-s-txt-lb
	{
		padding-right: 10px;
	}
	.o-u-box
	{
		padding-left: 90px;
		display:flex;
		align-items: center;
		padding-top: 20px;
		.u-btn
		{
			margin-left: 10px;
			padding: 4px 20px;
			background-color: #3388FF;
			color:#FFF;
			border-radius: 4px;
			cursor: pointer;
		}
	}
	
</style>